<template>
  <keep-alive>
    <div class="swiper-container">
      <van-swipe class="home__swipper" :autoplay="3000" lazy-render>
        <van-swipe-item
          v-for="(item, index) in data.swiperList"
          :key="index"
        >
          <img :src="item.pic" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </keep-alive>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive } from "vue";
import { getBanner } from "../../api/discover";
export default defineComponent({
  name: "Swiper",
  setup() {
    const data = reactive({
      swiperList: [],
    });
    onMounted(async () => {
      const res = await getBanner();
      data.swiperList = res.data.banners;
    });
    return {
      data,
    };
  },
});
</script>

<style scoped>

.swiper-container {
    text-align: center;
}

.swiper-container img {
    width: 93%;
    border-radius: 20rem;
    margin-bottom: 5rem;
}

</style>
